<template>
  <div>
    <header>
      <div><i class="iconfont icon-fanhui" @click="goHome"></i></div>
      <div>提交订单</div>
      <div class="edit">首页</div>
    </header>
    <section>
      <div class="address" @click="goAddress">
        <h3>收货地址</h3>
        <div class="userinfo" v-for="(item, index) in userAddress" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.tel }}</span>
        </div>
        <!-- 用户信息 -->
        <div
          class="userAddress"
          v-for="(item, index) in userAddress"
          :key="index"
        >
          <span>{{ item.province }}</span>
          <span>{{ item.city }}</span>
          <span>{{ item.county }}</span>
          <span>{{ item.addressDetail }}</span>
        </div>
        <!-- 支付方式 -->
        <div class="payment">
          <div class="select">请选择支付方式：</div>
          <div>
            <van-radio-group v-model="payment">
              <van-radio name="vx">微信支付</van-radio>
              <van-radio name="ali">支付宝支付</van-radio>
            </van-radio-group>
          </div>
        </div>
        <!-- 商品信息 -->
        <div class="goodsinfo">
          <ul v-for="(item, index) in goodsinfo" :key="index">
            <li>
              <div>
                <img :src="item.goodsImg" alt="" />
              </div>
              <div class="goodsinfo-title">
                <h4>{{ item.content }}</h4>
                <div>
                  <span class="price">￥{{ item.price }}</span>
                  <span class="num"> × {{ item.cartNum }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <footer>
      <div class="order-total">
        <span>共</span>
        <b>{{ this.total }}</b>
        <span>件，</span>
        <span>总金额：</span>
        <em>￥{{ this.totalPrice }}</em>
      </div>
      <div class="submitOrder" @click="submitOrder">提交订单</div>
    </footer>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
export default {
  name: "Order",
  data() {
    return {
      total: 0,
      totalPrice: 0,
      selectListId: [],
      orderID: {
        orderID: "",
        cartID: [],
      },
      payment: "vx", //支付方式默认为微信
      token: {
        token: "",
      },
      userAddress: [], //用户的地址信息
      goodsinfo: [],
    };
  },
  created() {
    this.getParams();
    this.getUser();
    this.getGoods();
  },
  methods: {
    //获取参数
    getParams() {
      this.orderID.cartID = window.sessionStorage.getItem("selectListId");
      this.orderID.orderID = window.sessionStorage.getItem("orderID");
    },

    //获取用户信息和地址和所选中的商品信息
    getUser() {
      this.token.token = window.sessionStorage.getItem("token");
      //   console.log(this.token);
      this.$http.post("/getOrder", qs.stringify(this.token)).then((res) => {
        // console.log(res);
        this.userAddress = res.data;
      });
    },

    //获取所选中的商品信息
    getGoods() {
      this.$http.post("/getGoods", qs.stringify(this.orderID)).then((res) => {
        // console.log(res.data);
        this.goodsinfo = res.data;
        this.goodsinfo.forEach((item) => {
          this.totalPrice += parseInt(item.price) * item.cartNum;
          this.total += item.cartNum;
        });
      });
    },
    //回到首页
    goHome() {
      this.$router.push("/home");
    },
    //选择收获地址
    goAddress() {
      this.$router.push("/address/addressIndex");
    },
    //提交订单
    submitOrder() {
      //1.在购物车页面点击去结算后，订单状态为1===》未支付
      //2.在订单页面点击提交订单，订单状态为2===》待支付
      this.$http
        .post("/submitOrder", qs.stringify(this.orderID))
        .then((res) => {
          if (res.success) {
            let data = {
              orderId: this.orderID.orderID, //随机生成唯一的就行了这个 自己找吧
            };
            this.$http
              .post("/alipay", qs.stringify(this.orderID))
              .then((res) => {
                console.log(res);
                // window.location.href = res.result;
              });
          }
        });
      //3.去支付，支付成功订单状态为3===》已支付
      //4.支付失败，订单状态为0===》支付失败
    },
  },
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 57px;
  background-color: #b0352f;
  color: #fff;
  font-size: 20px;
  i {
    padding: 0 15px;
  }
  .edit {
    padding: 0 20px;
  }
}
section {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7ff;
  font-size: 14px;
  .address {
    h3 {
      padding: 3px 5px;
      margin: 0;
    }
    .userinfo,
    .userAddress {
      padding: 4px 8px;
      background-color: #fff;
      span {
        margin-right: 8px;
      }
    }
  }
  .payment {
    background-color: #fff;
    margin-top: 7px;
    padding: 5px 6px;
    .select {
      padding-bottom: 10px;
    }
    .van-radio-group {
      display: flex;
      .van-radio {
        margin-right: 10px;
      }
    }
  }
  //   商品信息
  .goodsinfo {
    margin-top: 5px;
    ul {
      width: 100%;
      background-color: #fff;
      margin-top: 5px;
      li {
        display: flex;
        img {
          width: 100px;
        }
        .goodsinfo-title {
          width: 100%;
          margin-left: 5px;
          .price {
            margin-right: 10px;
            font-weight: 700;
            color: #b0352f;
          }
          .num {
            float: right;
            padding-right: 20px;
          }
        }
      }
    }
  }
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-items: center;
  //   padding: 0 10px;
  border-top: 1px solid #ccc;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: 16px;
  background-color: #fff;
  .order-total {
    padding-left: 10px;
    b {
      color: #b0352f;
    }
    em {
      color: #b0352f;
      font-size: 20px;
    }
  }
  .submitOrder {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #b0352f;
    color: #fff;
  }
}
</style>